<template>
  <div>
    <Modal
      v-model="modals"
      width="700"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
        <Row type="flex" :gutter="24">
			<Col :xs="24">
	            <FormItem label="主诉：">
	              <Input
	                placeholder="请输入主诉"
	                type="textarea"
	                :rows="4"
	                element-id="main_chinf"
	                v-model="formValidate.main_chinf"
	              />
	            </FormItem>
            </Col>
			<Col :xs="24">
			    <FormItem label="现病史：">
			      <Input
			        placeholder="请输入现病史"
			        type="textarea"
			        :rows="4"
			        element-id="hpi"
			        v-model="formValidate.hpi"
			      />
			    </FormItem>
			</Col>
			<Col  :xs="24">
			    <FormItem label="既往史：" prop="sex">
			      <div class="section">
					  <div class="secitem">
						  <div class="label">疾病史：</div>
						  <div class="check"><Checkbox :label="1" v-model="formValidate.jbs">否认</Checkbox></div>
						  <div></div>
						  <div>
							  <Input
								class="input"
							    placeholder="请输入"
							    :rows="1"
							    element-id="jbs_text"
							    v-model="formValidate.jbs_text"
							  />
						  </div>
					  </div>
					  <div class="secitem">
						  <div class="label">过敏史：</div>
						  <div class="check"><Checkbox :label="1" v-model="formValidate.bms">否认</Checkbox></div>
						  <div></div>
						  <div>
							  <Input
								class="input"
							    placeholder="请输入"
							    :rows="1"
							    element-id="bms_text"
							    v-model="formValidate.bms_text"
							  />
						  </div>
					  </div>
					  <div class="secitem">
						  <div class="label">手术史：</div>
						  <div class="check"><Checkbox :label="1" v-model="formValidate.sss">否认</Checkbox></div>
						  <div></div>
						  <div>
							  <Input
								class="input"
							    placeholder="请输入"
							    :rows="1"
							    element-id="sss_text"
							    v-model="formValidate.sss_text"
							  />
						  </div>
					  </div>
					  <div class="secitem">
						  <div class="label">家族史：</div>
						  <div class="check"><Checkbox :label="1" v-model="formValidate.jzs">否认</Checkbox></div>
						  <div></div>
						  <div>
							  <Input
								class="input"
							    placeholder="请输入"
							    :rows="1"
							    element-id="jzs_text"
							    v-model="formValidate.jzs_text"
							  />
						  </div>
					  </div>
					  <div class="secitem">
						  <div class="label">其他：</div>
						  <div></div>
						  <div>
							  <Input
								class="input"
							    placeholder="请输入"
							    :rows="1"
							    element-id="qt"
							    v-model="formValidate.qt"
							  />
						  </div>
					  </div>
					  <!-- <CheckboxGroup v-model="formValidate.sex">
					    <Checkbox :label="1">是否疾病史</Checkbox>
					    <Checkbox :label="2">是否过敏史</Checkbox>
					    <Checkbox :label="3">是否手术史</Checkbox>
					    <Checkbox :label="4">是否家族史</Checkbox>
					    <Checkbox :label="5">其他</Checkbox>
					  </CheckboxGroup>
					  <Input
						class="input"
						v-if="formValidate.sex == 5"
					    placeholder="请输入"
					    :rows="1"
					    element-id="remark"
					    v-model="formValidate.else"
					  /> -->
				  </div>
			    </FormItem>
			</Col>
			<Col :xs="24">
			    <FormItem label="专科检查：">
			      <div class="special_check">
					  <Button class="button" @click="menusAdd('挂号')" icon="md-add">添加检查</Button>
					  <Input
					    placeholder="请输入备注"
					    :rows="1"
					    element-id="special_check"
					    v-model="formValidate.special_check"
					  />
				  </div>
			    </FormItem>
			</Col>
			<Col :xs="24">
			    <FormItem label="处理意见：">
			      <Input
			        placeholder="请输入处理意见"
			        :rows="1"
			        element-id="handle_advise"
			        v-model="formValidate.handle_advise"
			      />
			    </FormItem>
			</Col>
			
			<Col  :xs="24">
			    <FormItem label="矫正方案：" prop="sex">
			      <CheckboxGroup v-model="formValidate.programme">
			        <Checkbox :label="1">普通单光镜</Checkbox>
			        <Checkbox :label="2">棱镜</Checkbox>
			        <Checkbox :label="3">渐进多焦镜</Checkbox>
			        <Checkbox :label="4">近视离焦镜</Checkbox>
			        <Checkbox :label="5">成长乐</Checkbox>
			        <Checkbox :label="6">美德可儿</Checkbox>
			        <Checkbox :label="7">大直径RGP</Checkbox>
			        <Checkbox :label="8">多焦点软镜</Checkbox>
			        <Checkbox :label="9">软镜</Checkbox>
			        <Checkbox :label="10">CME减负镜</Checkbox>
			      </CheckboxGroup>
			    </FormItem>
			</Col>
          
          
        </Row>
      </Form>
	  <div slot="footer">
	    <Button @click="cancel()">取消</Button>
	  </div>
    </Modal>
  </div>
</template>

<script>
import { saveApi} from '@/api/mehistory';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
export default {
  name: 'mediaForm',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      ruleValidate: {
		main_chinf: [{ required: true, message: '请输入主诉', trigger: 'blur' }],
		hpi: [{ required: true, message: '请输入现病史', trigger: 'blur' }]
      },
      docs: [],
      peoples: [],
      recs: [],
	  groups:[],
      sources: [],
      tags: [],
      valids: false,
      list: icon,
      authType: true,
      search: icon,
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[]
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  computed: {
	  
  },
  methods: {
	  addText(type){
		  
	  },
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
	// 上传成功
	handleSuccess(res, file) {
	  if (res.status === 200) {
		this.files.push(res.data.data);
	    this.$Message.success(res.msg);
	  } else {
	    this.$Message.error(res.msg);
	  }
	},
	handleFormatError(file) {
		
	},
	handleMaxSize(file) {
	  this.$Message.warning('请上传文件30M以内的文件');
	},
	delFile(index){
		this.files.splice(index,1);
	},
	// 上传头部token
	getToken() {
	  this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	  console.info(this.header);
	},
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
    // 获取客户数据
    getAddFrom() {
		
    },
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.valids = true;
		  console.info(this.formValidate);
		  this.formValidate.programmes = this.formValidate.programme.join(',');
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
              this.modals = false;
              this.$emit('getList');
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
			if (!this.formValidate.main_chinf) return this.$Message.error('请输入主诉！');
			if (!this.formValidate.hpi) return this.$Message.error('请输入现病史！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.scollhide {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-left: 18px;
  padding: 10px 0 10px 0;
  box-sizing: border-box;
}
.content {
  font-size: 12px;
}

.time {
  font-size: 12px;
  color: #2d8cf0;
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.icons-item .ivu-icon {
  font-size: 16px;
}
.search-rule {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #555;
}
.rule-list {
  background-color: #f2f2f2;
  width: 32%;
  margin: 5px;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: all 0.1s;
}
.rule-list:hover {
  background-color: #c5d1dd;
}
.rule-list div {
  white-space: nowrap;
}
.select-rule {
  background-color: #c5d1dd;
}
.sec{
	width: 100px;
}
.add {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  justify-content: center;
}

.file{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.file:hover{
	background-color: #edf7fe;
}
.close-bg{
	display: inline-block;
	width: 35px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 15px;;
}

.close-bg:hover{
	cursor: pointer;
}

.close {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(45deg);
}

.close::after {
	content: '';
	display: block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(-90deg);
}

.section{
	display: flex;
	flex-direction: column;
}
.section .secitem{
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 2px 0px;
}
.section .secitem .label{
	width:70px;
}
.section .secitem .check{
	width:80px;
}
.section .secitem .button{
	height:25px;
	line-height: 25px;
	padding: 0px 15px;
	margin: 0px;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.section .secitem .input{
	margin-left: 25px;
}
.special_check{
	display: flex;
	flex-direction: row;
}
.special_check .button{
	margin-right: 30px;
}
</style>
